import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class QuickPayAlertView extends StatefulWidget {
  final String title;
  final String url;
  final VoidCallback onClose;

  const QuickPayAlertView({
    Key? key,
    required this.title,
    required this.url,
    required this.onClose,
  }) : super(key: key);

  @override
  State<QuickPayAlertView> createState() => _QuickPayAlertViewState();
}

class _QuickPayAlertViewState extends State<QuickPayAlertView> {
  late WebViewController _controller;
  double containerWidth = 345;
  double containerHeight = 260;
  String displayTitle = "";

  @override
  void initState() {
    super.initState();
    displayTitle = widget.title;

    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
        onPageStarted: (_) {
          _showLoading();
        },
        onPageFinished: (_) {
          _hideLoading();
        },
        onWebResourceError: (error) {
          _hideLoading();
        },
      ))
      ..addJavaScriptChannel(
        'appCallback',
        onMessageReceived: (message) {
          _hideSelf();
        },
      )
      ..addJavaScriptChannel(
        'dsCallback',
        onMessageReceived: (message) {
          _expandFor3DS();
        },
      )
      ..loadRequest(Uri.parse(widget.url));
  }

  void _expandFor3DS() {
    Future.delayed(const Duration(seconds: 2), () {
      setState(() {
        final screenWidth = MediaQuery.of(context).size.width;
        containerWidth = screenWidth - 40;
        containerHeight = 605;
        displayTitle = "请输入3DS码";
      });
    });
  }

  void _hideSelf() {
    widget.onClose();
    Navigator.of(context).pop();
  }

  void _showLoading() {
    // 可以替换为你自己的 Toast 或 Loading 控件
    // 例如：LoadingWidget.show(context);
  }

  void _hideLoading() {
    // LoadingWidget.hide();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black.withOpacity(0.5),
      child: Center(
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          width: containerWidth,
          height: containerHeight,
          padding: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Stack(
            children: [
              // 标题
              Positioned(
                top: 15,
                left: 16,
                right: 40,
                child: Center(
                  child: Text(
                    displayTitle,
                    style: const TextStyle(
                      fontSize: 18,
                      color: Colors.black87,
                    ),
                  ),
                ),
              ),
              // 关闭按钮
              Positioned(
                top: 15,
                right: 15,
                child: GestureDetector(
                  onTap: _hideSelf,
                  child: const Icon(Icons.close, size: 22),
                ),
              ),
              // WebView 区域
              Positioned.fill(
                top: 55,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: WebViewWidget(controller: _controller),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
